<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <th:block th:include="include :: header('登录')"/>
  <link rel="stylesheet" href="admin/css/other/login.css"/>
</head>
<!-- 代 码 结 构 -->
<body background="admin/images/background2.svg">
<form class="layui-form" action="javascript:void(0);">
  <div class="layui-form-item">
    <img class="logo" src="admin/images/logo.png"/>
    <div class="title">Dd Admin</div>
    <div class="desc">
      Dd Admin 快 速 开 发 框 架
    </div>
  </div>
  <div class="layui-form-item">
    <input name="username" type="text" placeholder="账 户 : admin " value="admin" hover class="layui-input"/>
  </div>
  <div class="layui-form-item">
    <input name="password" type="password" placeholder="密 码 : admin " value="admin" hover class="layui-input"/>
  </div>
  <div class="layui-form-item">
    <input placeholder="验证码 : " name="captcha" hover class="code layui-input layui-input-inline"/>
    <img src="/system/captcha/generate" class="codeImage" id="captchaImage"/>
  </div>
  <div class="layui-form-item">
    <input type="checkbox" name="remember-me" title="记住密码" lay-skin="primary">
  </div>
  <div class="layui-form-item">
    <button class="pear-btn pear-btn-success login" lay-submit lay-filter="login">
      登 入
    </button>
  </div>
</form>
<th:block th:include="include :: footer"/>
<script>
  layui.use(['form', 'jquery', 'layer', 'button'], function () {
    let form = layui.form;
    let $ = layui.jquery;
    let layer = layui.layer;
    let button = layui.button;

    let captchaPath = "/system/captcha/generate";

    form.on('submit(login)', function (data) {
      let loader = layer.load();
      let btn = button.load({elem: '.login'});
      $.ajax({
        url: '/login',
        data: data.field,
        type: "post",
        dataType: 'json',
        success: function (result) {
          layer.close(loader);
          btn.stop(function () {
            if (result.success) {
              layer.msg(result.msg, {icon: 1, time: 1000}, function () {
                location.href = "/index";
              })
            } else {
              layer.msg(result.msg, {icon: 2, time: 1000}, function () {
                document.getElementById("captchaImage").src = captchaPath + "?" + Math.random();
              });
            }
          })
        }
      });
      return false;
    });

    // 手动刷新 Captcha 验证码
    $("#captchaImage").click(function () {
      document.getElementById("captchaImage").src = captchaPath + "?" + Math.random();
    })
    // 自动刷新 Captcha 验证码
    setInterval(function () {
      document.getElementById("captchaImage").src = captchaPath + "?" + Math.random();
    }, 30 * 1000);
    // 验证 Session 过期 (避免套娃)
    validateKickout();
  })
</script>
<!-- Session 过期处理 -->
<script>
  if (window != top) {
    top.location.href = location.href;
  }

  function validateKickout() {
    if (getParam("kickout") == 1) {
      layer.alert("<font color='red'>您已在别处登录，请您修改密码或重新登录</font>", {
          icon: 0,
          title: "系统提示"
        },
        function (index) {
          //关闭弹窗
          layer.close(index);
        });
    } else if (getParam("sessionout") == 1) {
      layer.alert("<font color='red'>登录已过期，请重新登录</font>", {
          icon: 0,
          title: "系统提示"
        },
        function (index) {
          //关闭弹窗
          layer.close(index);
        });
    }
  }

  function getParam(paramName) {
    var reg = new RegExp("(^|&)" + paramName + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return decodeURI(r[2]);
    return null;
  }
</script>
</body>
</html>
